<script lang="ts" setup>
import router from "@/router/index.js";

const toAddSchedule = (date) => {
  router.push({path: "/index/addSchedule", query: {date: date}});
}
</script>

<template>
  <el-calendar>
    <template #date-cell="{ data }">
      <p :class="data.isSelected ? 'is-selected' : ''">
        {{ data.day.split('-').slice(1).join('-') }}
        <el-button @click="toAddSchedule(data.day)" circle>➕</el-button>
      </p>
    </template>
  </el-calendar>
</template>

<style scoped>
.is-selected {
  color: #1989fa;
}
</style>